import {FC} from 'react';
// 引入头部组件
import Header from '../../components/Header/Header';
// 引入组件
import { Form, Input,Button,Toast } from 'antd-mobile';
// 引入 useState
import {useState,useRef} from 'react';
// 引入路由工具
import {useNavigate} from 'react-router-dom';
// 引入图标
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons';
// 引入 axios 方法
import {register,LoGin} from '../../api/admin';
// 引入请提示

import { message } from 'antd';

import store from 'store2';
// 引入 css 样式
import './index.css';
interface LoginProps{};

const Login:FC<LoginProps>=()=>{
  const [visible, setVisible] = useState(false);

  const [messages,setMessate]=useState<string>('登录');
  const [content,setContent]=useState<string>('注册账号');

  // 阻止 a 标签的默认事件
  const Prevent=(event: React.MouseEvent<HTMLAnchorElement>)=>{
    event.preventDefault();
    if(messages==='登录'){
      setMessate('注册');
      setContent('账号登录');
    }else if(messages==='注册'){
      setMessate('登录')
      setContent('注册账号');
    }
  }
// console.log(message);
  const navigate=useNavigate();
  // 提交的回调函数
  const onFinish = (values: any) => {
    if(messages==='登录'){
      LoGin(values).then(res=>{
        console.log(res);
        if(res.data.code===1){
          store.set('token',res.data.data);
          navigate('/home/home');
          message.success('登陆成功');

        }
        if(res.data.code===0){
          message.error(res.data.data);
        }
      })
    }
    if(messages==='注册'){
      register(values).then(res=>{
        console.log(res);
      })
    }
  }
  
    return(
        <>
          {/* 头部导航 */}
          <Header title={messages}/>

          {/* Logo */}
          <div className="Logo">
            <img src="https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png" alt="" />
          </div>

          {/* 表单 */}
          <div className='From'>
            <Form
             layout='horizontal'
             name='form'
             onFinish={onFinish}
             footer={
               <Button block type='submit' color='primary' size='large'>
                 {messages}
               </Button>}>
               <Form.Item 
                label='用户名'
                name='userName'
                rules={[{ required: true, message: '请输入用户名!' }]}
                >
                <Input placeholder='用户名' clearable />
               </Form.Item>
               <Form.Item
                label='密码'
                name='password'
                rules={[{ required: true, message: '请输入密码!' }]}
                extra={
                  <div className='eye'>
                    {!visible ? (
                      <EyeInvisibleOutline onClick={() => setVisible(true)} />
                    ) : (
                      <EyeOutline onClick={() => setVisible(false)} />
                    )}
                  </div>
                }
              >
                <Input
                  placeholder='密码'
                  clearable
                  type={visible ? 'text' : 'password'}
                />
              </Form.Item>
            </Form>
            {/* 登录注册切换 */}
            <a href="" onClick={Prevent}>{content}</a>
          </div>
        </>
    )
}

export default Login;

